<template>
  <div class="container">
    <div class="add-form">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="企业信息" name="1">
          <el-form
            ref="company-info"
            :model="editForm"
            :rules="$rules"
            label-width="10rem"
            status-icon
            class="company-info-form"
            disabled
          >
            <el-row>
              <el-col :span="12">
                <el-form-item
                  :label="$language.local('customerName')"
                  prop="customerName"
                >
                  <xy-input
                    v-model="editForm.customerName"
                    clearable
                  ></xy-input>
                </el-form-item>

                <el-form-item
                  :label="$language.local('customTaxIdcd')"
                  prop="customTaxIdcd"
                >
                  <xy-input
                    v-model="editForm.customTaxIdcd"
                    clearable
                  ></xy-input>
                </el-form-item>
                <el-form-item
                  :label="$language.local('IdNumber')"
                  prop="IdNumber"
                >
                  <xy-input v-model="editForm.IdNumber" clearable></xy-input>
                </el-form-item>
                <el-form-item
                  :label="$language.local('customCollectorPhone')"
                  prop="customCollectorPhone"
                >
                  <xy-number
                    v-model="editForm.customCollectorPhone"
                    clearable
                  ></xy-number>
                </el-form-item>
                <el-form-item
                  :label="$language.local('areaName')"
                  prop="areaName"
                >
                  <xy-input v-model="editForm.areaName" clearable></xy-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  :label="$language.local('AgentId')"
                  prop="AgentId"
                >
                  <el-select
                    v-model="editForm.AgentId"
                    clearable
                    filterable
                    :placeholder="
                      $language.local('请选择') + $language.local('AgentId')
                    "
                  >
                    <el-option
                      v-for="item in agents"
                      :key="item.Id"
                      :label="item.AgentName"
                      :value="item.Id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item
                  :label="$language.local('customLegalPerson')"
                  prop="customLegalPerson"
                >
                  <xy-input
                    v-model="editForm.customLegalPerson"
                    clearable
                  ></xy-input>
                </el-form-item>
                <el-form-item
                  :label="$language.local('customCollector')"
                  prop="customCollector"
                >
                  <xy-input
                    v-model="editForm.customCollector"
                    clearable
                  ></xy-input>
                </el-form-item>
                <el-form-item
                  :label="$language.local('customMail')"
                  prop="customMail"
                >
                  <xy-input v-model="editForm.customMail" clearable></xy-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="开票信息" name="2">
          <div>
            <el-form
              ref="editForm"
              :model="editForm"
              :rules="$rules"
              status-icon
              label-width="12rem"
              size="mini"
              disabled
            >
              <el-row>
                <el-col :span="12">
                  <el-form-item
                    prop="invoiceType"
                    :label="$language.local('开票类型')"
                  >
                    <el-radio-group v-model="editForm.invoiceType">
                      <el-radio-button :label="1">全额</el-radio-button>
                      <el-radio-button :label="2">差额</el-radio-button>
                      <el-radio-button :label="3">其它</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item
                    prop="Companytype"
                    :label="$language.local('企业类型')"
                  >
                    <!-- <merchant-type v-model="editForm.Companytype"></merchant-type> -->
                    <el-radio-group v-model="editForm.Companytype">
                      <el-radio-button :label="1">企业</el-radio-button>
                      <el-radio-button :label="2">个体工商户</el-radio-button>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item
                    prop="nsrxz"
                    :label="$language.local('纳税人性质')"
                  >
                    <el-radio-group v-model="editForm.nsrxz">
                      <el-radio-button :label="1">一般纳税人</el-radio-button>
                      <el-radio-button :label="2">小规模纳税人</el-radio-button>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item
                    prop="IsSendMessageToEmp"
                    :label="$language.local('是否下发短信')"
                  >
                    <el-radio-group v-model="editForm.IsSendMessageToEmp">
                      <el-radio-button :label="0">是</el-radio-button>
                      <el-radio-button :label="1">否</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    prop="empSignType"
                    :label="$language.local('自由职业者签约类型')"
                  >
                    <el-radio-group v-model="editForm.empSignType">
                      <el-radio-button :label="1"
                        >先签约,后付款(电子协议)</el-radio-button
                      >
                      <el-radio-button :label="2"
                        >批量签约(纸质协议)</el-radio-button
                      >
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item
                    prop="payType"
                    :label="$language.local('付款方式')"
                  >
                    <el-radio-group v-model="editForm.payType">
                      <el-radio-button :label="1">银行卡</el-radio-button>
                      <el-radio-button :label="2">钱包账户</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                  <template v-if="editForm.payType == 2">
                    <el-form-item
                      prop="Account"
                      :label="$language.local('钱包账号')"
                    >
                      <xy-input v-model="editForm.Account"></xy-input>
                    </el-form-item>
                  </template>
                  <template v-else>
                    <el-form-item
                      prop="BankName"
                      :label="$language.local('开户行')"
                    >
                      <el-select
                        v-model="editForm.BankName"
                        clearable
                        filterable
                        :placeholder="
                          $language.local('请选择') + $language.local('开户行')
                        "
                      >
                        <el-option
                          v-for="item in banks"
                          :key="item.Id"
                          :label="item.BANKNAME"
                          :value="item.BANKNAME"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item
                      prop="BankCardNo"
                      :label="$language.local('银行卡号')"
                    >
                      <xy-number v-model="editForm.BankCardNo"></xy-number>
                    </el-form-item>
                  </template>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-collapse-item>
        <el-collapse-item title="项目名称" name="3">
          <div>
            <el-form
              :model="editForm"
              label-width="10rem"
              :rules="$rules"
              ref="editFormRef"
              status-icon
              disabled
            >
              <el-form-item
                :label="$language.local('项目名称')"
                prop="ProjectName"
              >
                <xy-input v-model="editForm.ProjectName" clearable></xy-input>
              </el-form-item>
              <el-form-item
                prop="TechnicalRequirement"
                :label="$language.local('技术要求')"
              >
                <xy-input
                  type="textarea"
                  v-model="editForm.TechnicalRequirement"
                  clearable
                ></xy-input
              ></el-form-item>
              <el-form-item
                prop="RequirementDescription"
                :label="$language.local('需求描述')"
              >
                <xy-input
                  type="textarea"
                  v-model="editForm.RequirementDescription"
                  clearable
                ></xy-input
              ></el-form-item>
              <el-form-item :label="$language.local('入网申请表')">
                <el-upload
                  class="upload-demo"
                  ref="attFile"
                  :action="this.$http.baseUrl + ''"
                  :auto-upload="true"
                  :on-success="handleSuccess"
                  :on-error="handleError"
                  :on-change="uploadChange"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="4"
                  :on-exceed="handleExceed"
                  :file-list="editForm.attFileList"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <!-- <div slot="tip" class="el-upload__tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div> -->
                </el-upload>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-item>
        <el-collapse-item title="资质文件" name="4">
          <div>
            <el-form
              :model="editForm"
              :rules="$rules"
              ref="qualificationFilesRef"
              status-icon
              disabled
            >
              <p>请依次上传营业执照、开户许可证、法人身份证正反面</p>
              <el-form-item prop="fileList" :label="$language.local('')">
                <el-upload
                  ref="filesRef"
                  action="#"
                  list-type="picture-card"
                  :auto-upload="false"
                  :limit="4"
                  :file-list="editForm.fileList"
                >
                  <i slot="default" class="el-icon-plus"></i>
                  <div slot="file" slot-scope="{ file }">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    />
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in"></i>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                      >
                        <i class="el-icon-download"></i>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="removeFile(file)"
                      >
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="editForm.BusinesslicenseImg" alt="" />
                </el-dialog>
              </el-form-item>
              <!-- <el-row>
                <el-col :span="12">
                  <el-form-item :label="$language.local('营业执照')">
                    <el-upload
                      action="#"
                      list-type="picture-card"
                      :auto-upload="false"
                      :on-change="handleQualificationFilesChange"
                      :limit="1"
                      :disabled="continueAdd"
                    >
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{ file }">
                        <img
                          class="el-upload-list__item-thumbnail"
                          :src="file.url"
                          alt=""
                        />
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleDownload(file)"
                          >
                            <i class="el-icon-download"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                          >
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img
                        width="100%"
                        :src="editForm.BusinesslicenseImg"
                        alt=""
                      />
                    </el-dialog>
                  </el-form-item>
                  <el-form-item :label="$language.local('身份证图片（正面）')">
                    <el-upload
                      action="#"
                      list-type="picture-card"
                      :auto-upload="false"
                      :limit="1"
                    >
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{ file }">
                        <img
                          class="el-upload-list__item-thumbnail"
                          :src="file.url"
                          alt=""
                        />
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleDownload(file)"
                          >
                            <i class="el-icon-download"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                          >
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img
                        width="100%"
                        :src="editForm.BusinesslicenseImg"
                        alt=""
                      />
                    </el-dialog>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$language.local('开户许可证')">
                    <el-upload
                      action="#"
                      list-type="picture-card"
                      :auto-upload="false"
                      :limit="1"
                    >
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{ file }">
                        <img
                          class="el-upload-list__item-thumbnail"
                          :src="file.url"
                          alt=""
                        />
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleDownload(file)"
                          >
                            <i class="el-icon-download"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                          >
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img
                        width="100%"
                        :src="editForm.BusinesslicenseImg"
                        alt=""
                      />
                    </el-dialog>
                  </el-form-item>
                  <el-form-item :label="$language.local('身份证图片（反面）')">
                    <el-upload
                      action="#"
                      list-type="picture-card"
                      :auto-upload="false"
                      :limit="1"
                    >
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{ file }">
                        <img
                          class="el-upload-list__item-thumbnail"
                          :src="file.url"
                          alt=""
                        />
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleDownload(file)"
                          >
                            <i class="el-icon-download"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                          >
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img
                        width="100%"
                        :src="editForm.BusinesslicenseImg"
                        alt=""
                      />
                    </el-dialog>
                  </el-form-item>
                </el-col>
              </el-row> -->
            </el-form>
          </div>
        </el-collapse-item>
      </el-collapse>

      <div class="form-footer mt3">
        <el-button class="mr3" type="danger" @click="onSubmit(2)">{{
          $language.local("不通过")
        }}</el-button>
        <el-button type="success" @click="onSubmit(1)">{{
          $language.local("通过")
        }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ["1", "2", "3", "4"],

      editForm: {
        BankName: "",
        BankCardNo: "",
      },
      agents: [],
      dialogVisible: false,
      disabled: false,
      continueAdd: 0,
      imageUrl: "",
      banks: [],
    };
  },
  created() {
    this.editForm = {
      ...JSON.parse(window.sessionStorage.getItem("checkMerchant")),
      ...this.editForm,
    };
    console.log(this.editForm);
    if (!this.editForm) {
      this.$router.go(-1);
      return;
    }
    let name = this.editForm.attFile.replace(/.+\//, "");
    console.log(name);
    this.editForm.attFileList = [{ name, url: this.editForm.attFile }];
    this.getAgents();
    this.getBank();
  },
  methods: {
    async getAgents() {
      let response = await this.$http.get("/api/Agent/GetList?pageSize=100");
      // console.log(response);
      if (response.data.Code == 200) {
        this.agents = response.data.Data;
      }
    },
    cancel() {
      this.$router.go(-1);
    },
    async getBank() {
      let response = await this.$http.get("/api/Common/GetBankItem");
      // console.log(response);
      this.banks = response.data.Data;
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },

    async onSubmit(check) {
      let response = await this.$http.post(
        `/api/MerchantCheck/Check/${this.editForm.Id}?CheckStatus=${check}&CheckResult=2`
      );
      console.log(response);
      this.$router.replace("/merchantchecklist");
    },
  },
};
</script>

<style lang="less" scoped>
.add-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  //   align-items: center;
  margin: 2rem;

  //border: 1px solid #aaa;
}
.company-info-form {
  width: 100%;
}
.el-select {
  width: 100%;
}
.form-footer {
  display: flex;
  justify-content: center;
}
</style>
